<template>
	<view>
		<!-- 活动 -->
		<view class="row">
			<view @click="details()">
				<!-- 图片 -->
				<view class="diagram">
					<image class="active_diagram" :src="img"></image>
				</view>
				<view class="header">
					<text class="text">{{title}}</text><text>></text>
				</view>
			</view>
			<!-- 客户报名列表 -->
			<view class="sign_up" @click="apply()">
				<view class="title">
					<view class="head">客户报名列表</view>
				</view>
				<view class="people">
					<view class="people_num">
						<view class="people_title">报名人数</view>
						<view class="num">{{signup}}</view>
					</view>
					<view class="people_pay">
						<view class="people_title">支付人数</view>
						<view class="num">{{pay}}</view>
					</view>
				</view>
			</view>
			<!-- 顾问关注列表 -->
			<view class="attention" @click="attention()">
				<view class="title">
					<view class="head">客户关注列表</view>
				</view>
				<view class="people">
					<view class="people_num">
						<view class="people_title">分享人数</view>
						<view class="num">{{share}}</view>
					</view>
					<view class="people_pay">
						<view class="people_title">阅读人数</view>
						<view class="num">{{read}}</view>
					</view>
				</view>
			</view>
			<!-- 顾问数据列表 -->
			<view class="digital" @click="datasheets()">
				<view class="title">
					<view class="head">顾问数据列表</view>
				</view>
				<view class="sell_coupon">
					<view class="order">
						<view class="one">
							<image class="on_bg" src="../../static/sellcoupon_and_propagation/one.png"></image>
							<view class="order_title">{{one_name}}</view>
						</view>
						<view class="num">{{one_share}}</view>
						<view class="order_num">报名人数</view>
					</view>
					<view class="two">
						<view class="one">
							<image class="two_bg" src="../../static/sellcoupon_and_propagation/two.png"></image>
							<view class="order_title">{{two_name}}</view>
						</view>
						<view class="num">{{two_share}}</view>
						<view class="order_num">报名人数</view>
					</view>
					<view class="order">
						<view class="one">
							<image class="three_bg" src="../../static/sellcoupon_and_propagation/three.png"></image>
							<view class="order_title">{{three_name}}</view>
						</view>
						<view class="num">{{three_share}}</view>
						<view class="order_num">报名人数</view>
					</view>
				</view>
			</view>
			<!-- 掌邦技术支持 -->
			<view class="support">
				<image class="zanboon" src="../../static/sellcoupon_and_propagation/zanboon.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				img:'http://img.redocn.com/sheying/20140731/qinghaihuyuanjing_2820969.jpg',
				title:'我是活动名字来来来分是奥恩啊瓦fewl的让百度',
				signup:98,
				pay:99,
				share:34,
				read:57,
				one_name:'刘美丽',
				one_share:98,
				two_name:'黄美丽',
				two_share:97,
				three_name:'李美丽',
				three_share:96,
				
				
				isActive:true,
			}
		},
		methods:{
			apply:function(){
				uni.navigateTo({
					url: '/pages/apply/apply'
				});
				
			},
			details:function(){
				uni.navigateTo({
					url: '/pages/huodongxiangqing/huodongxiangqing'
				});
			},
			attention:function(){
				uni.navigateTo({
					url: '/pages/attention/attention'
				});
			},
			// volume:function(){
			// 	uni.navigateTo({
			// 		url: '/pages/datasheets/datasheets?id=0'
			// 	});
			// },
			datasheets:function(){
				uni.navigateTo({
					url: '/pages/datasheets/datasheets?id=1'
				});
			},
			// voucher:function(){
			// 	let that=this;
			// 	that.isActive=true;
			// 	that.order=true;
			// 	// console.log(123);
			// },
			// spread:function(){
			// 	let that=this;
			// 	that.isActive=false;
			// 	that.order=false;
			// 	
			// },
			// 
		}
		
	}
</script>

<style>
	page{
		background: #F3F2F7;
	}
	.row{
		
	}
	.diagram{
		width: 100%;
		height: 406upx;
	}
		.active_diagram{
			width: 750upx;
			height: 100%;
		}
	.header{
		padding: 24upx 30upx;
		background-color: #FFFFFF;
		color: #CCCCCC;
		font-size: 34upx;
		font-weight:bold;
		margin-bottom: 20upx;
	}
		.text{
			color: #333333;
			font-size: 30upx;
			font-weight:600;
			margin-right:20upx ;
		}
	.sign_up{
		height: 228upx;
		background:url(../../static/sellcoupon_and_propagation/apply_bg.png);
		background-repeat:no-repeat;
		background-size: 100% 100%;
		margin-bottom: 20upx;
	}
		.title{
			display: flex;
			justify-content: center;
			height: 100upx;
			font-size: 32upx;
			font-weight: bold;
		}
			.head{
				margin-top:20upx;
			}
		.people{
			display: flex;
			justify-content:center;
		}
			.people_num{
				margin-right: 130upx;
			}
			.people_pay{
				margin-left: 130upx;
			}
			.people_num,.people_pay{
				display: flex;
				flex-direction: column;
				align-items: center;
				/* border: 1upx solid #333333; */
			}
				.people_title{
					color: #666666;
					font-size: 28upx;
				}
				.num{
					color: #333333;
					font-size: 48upx;
					font-weight: 600;
				}
	.attention{
		height: 228upx;
		background:url(../../static/sellcoupon_and_propagation/attention_bg.png);
		background-repeat:no-repeat;
		background-size: 100% 100%;
		margin-bottom: 20upx;
	}
	.digital{
		height: 258upx;
		background:url(../../static/sellcoupon_and_propagation/data_bg.png);
		background-repeat:no-repeat;
		background-size: 100% 100%;
		margin-bottom: 20upx;
	}
		.sell_coupon{
			display: flex;
			 justify-content: space-around;
		}
			.order,.two{
				display: flex;
				/* justify-content: center; */
				flex-direction: column;
				align-items: center;
			}
				.one{
					display: flex;
					align-items: center;
				}
				.order_title{
					font-size: 28upx;
					color: #333333;
				}
			.order_num{
				font-size: 24upx;
				color: #666666;
			}
					.on_bg,.two_bg,.three_bg{
						height: 28upx;
						width: 28upx;
						margin-right: 4upx;
					}
	.support{
			position: relative;
			display: flex;
			justify-content: center;
			margin-top:34upx;
			margin-bottom: 20upx;
		}
			.zanboon{
				height: 28upx;
				width: 216upx;
			}
</style>
